<template>
  <section id="community_edit">
      <div class="title">
          我的频道
      </div>
      <div class="mine-content">
        <draggable v-model="tags" :move="getdata" @update="datadragEnd">
            <transition-group>
                <div class="move" v-for="element in tags" :key="element.id">
                    {{element.name}}
                </div>
            </transition-group>
         </draggable>
      </div>
    <div class="title">
        推荐频道
    </div>
    <div class="recommend-content">
        <draggable v-model="tags" :move="getdata" @update="datadragEnd">
            <transition-group>
                <div class="move" v-for="element in tags" :key="element.id">
                    {{element.name}}
                </div>
            </transition-group>
         </draggable>
    </div>
  </section>
</template>
<script>
import draggable from "vuedraggable";
export default {
  name: "community_edit",
  components: {
    draggable
  },
  data() {
    return {
        tags:[
            {name:'关注',id:'1'},
            {name:'动态',id:'2'},
            {name:'车友会',id:'3'},
            {name:'消息',id:'4'},
        ]
    };
  },
  methods: {
      getdata (evt) {
        console.log(evt.draggedContext.element.id)
      },
      datadragEnd (evt) {
        console.log('拖动前的索引 :' + evt.oldIndex)
        console.log('拖动后的索引 :' + evt.newIndex)
        console.log(this.tags)
      }
  }
};
</script>
<style lang="scss">
#community_edit{
    padding: 50px 10%;
    .title{
       font-size: 26px; 
       font-weight: 900;
    }
    .mine-content{
        overflow: hidden;
        padding: 30px 0;
        .move{
            border: 1px solid rgb(75, 75, 75);
            float: left;
            font-size: 14px;
            padding: 5px;
            margin: 0 2vw;
        }
    }
}
</style>


